<template>
  <div id="sunrainContent">
    <div class="chart">
      <div
        id="chart"
        class="chart"
        :style="{ height: (height - 40) * 1.6 + 'px', width: width }"
      ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getBarometerDetail } from "@/api/dashboard";
import { sunrainOption, sunrainOption2 } from "./const";
export default {
  data() {
    return {
      barometerDetailArr: [],
      chart: null
    };
  },
  props: {
    segment: {
      type: String | Array,
      default: 99
    },
    // year: {
    //   type: String | Array,
    // },
    height: {
      type: Number,
      default: 200
    },
    width: {
      type: String,
      default: "200px"
    }
  },
  created() {
    // console.log("初始化渲染晴雨表：" + sunrainOption);
  },
  mounted() {
    this.getBarometerDetail();
  },
  watch: {
    segment: {
      handler(val) {
        console.log("segment渲染" + val);
        this.getBarometerDetail();
      },
      deep: true
    }
  },
  computed: {},
  methods: {
    async getBarometerDetail() {
      const res = await getBarometerDetail({
        segment: this.segment
      });
      this.barometerDetailArr = res.body;
      this.initChart(res.body);
    },
    initChart(obj) {
      sunrainOption.xAxis.data = [];
      sunrainOption.xAxis.data1 = [];
      sunrainOption.series[0].data = [];
      sunrainOption.series[0].data1 = [];
      obj.forEach((item) => {
        sunrainOption.xAxis.data.push(item.contextName);
        const contextName = [];
        const annualizedIncomeRate = [];
        item.classifyNetWorthVos.forEach((citem) => {
          contextName.push(citem.contextName);
          annualizedIncomeRate.push(citem.annualizedIncomeRate);
        });
        sunrainOption.xAxis.data1.push(contextName);
        sunrainOption.series[0].data.push(item.annualizedIncomeRate);
        sunrainOption.series[0].data1.push(annualizedIncomeRate);
      });
      // 提示层
      sunrainOption.tooltip.formatter = (params) => {
        const obj = params;
        if (sunrainOption.series[0].data1[obj.dataIndex].length > 1) {
          setTimeout(() => {
            const list = this.barometerDetailArr.filter((item) => {
              return item.contextName === params.name;
            })[0];
            const chart = echarts.init(document.getElementById("ebox"));
            sunrainOption2.xAxis.data =
              sunrainOption.xAxis.data1[obj.dataIndex];
            sunrainOption2.series[0].data =
              sunrainOption.series[0].data1[obj.dataIndex];
            chart.setOption(sunrainOption2);
            chart.on("click", (params) => {
              const contextId = list.classifyNetWorthVos.filter((item) => {
                return item.contextName === params.name;
              })[0].contextId;
              this.$router.push({
                path: `/strategyComb/groupManage/netWorthAnalysis/${contextId}`
              });
            });
          }, 100);
          return `<div style="padding-bottom: 2px;color:rgba(0, 0, 0, 1);font-weight: bold;">${obj.name}</div><div id="ebox" style="width:400px; height:200px;" class="ebox"></div>`;
        } else {
          return "";
        }
      };
      this.chart = echarts.init(document.getElementById("chart"));
      this.chart.setOption(sunrainOption);
      // 图表事件 点击跳转
      this.chart.on("click", (params) => {
        const list = this.barometerDetailArr.filter((item) => {
          return item.contextName === params.name;
        })[0];
        this.$router.push({
          path: `/strategyComb/combManage/netWorthAnalysis/${list.contextId}`
        });
      });
      //
      this.chart.on("mouseover", {}, (params) => {
        if (sunrainOption.series[0].data1[params.dataIndex].length > 1) {
          this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0, //这行不能省
            position: "top",
            // axisPointer: {
            //   type: "shadow",
            //   shadowStyle: {
            //     color: "rgba(150,150,150,0.3)"
            //   }
            // },
            name: params.name
          });
        } else {
          this.chart.dispatchAction({
            type: "hideTip",
            seriesIndex: 0, //这行不能省
            name: params.name
          });
        }
      });
      this.chart.on("globalout", {}, (params) => {
        this.chart.dispatchAction({
          type: "hideTip",
          seriesIndex: 0, //这行不能省
          name: params.name
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#sunrainContent {
  background: #fff;
}
</style>
